<template>
    <div class="supply">

        <span class="titleStr">采购信息</span>
        <el-progress :percentage="8"  :show-text="false"></el-progress>
        <span class="describe">
            使用Tips：《供应商送货单》通过子流程自动传递信息，可以一站式完成所有采购入库 管理业务流程
        </span>
        <p></p>

        <el-form :model="supplierDeliverGoods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="e2">
                <el-row :gutter="24">
                    <el-col :span="8" >

                        <el-form-item label="选择采购订单" prop="purchaseOrderId" >
                            <div class="e1" @click="choosePurchaseOrderDialogVisible = true">
                                <span id="person" class="el-icon-coin"> 选择数据</span>
                            </div>
                        </el-form-item>

                        <el-dialog
                                title="选择数据"
                                :visible.sync="choosePurchaseOrderDialogVisible"
                                width="70%">

                            <el-table
                                    ref="singleTable"
                                    :data="null"
                                    highlight-current-row
                                    border
                                    :row-key="getRowKey"
                                    @select="handleSelect"
                                    style="width: 100%">

                                <el-table-column
                                        type="selection"
                                        width="50">
                                </el-table-column>

                                <el-table-column
                                        property="supplierName"
                                        label="供应商名称"
                                        width="120">
                                </el-table-column>

                                <el-table-column
                                        property="purchaseOrderName"
                                        label="采购订单名称"
                                        width="120">
                                </el-table-column>

                                <el-table-column
                                        property="purchasePerson"
                                        label="采购负责人">
                                </el-table-column>

                                <el-table-column
                                        property="inWarehouse"
                                        label="入库仓库">
                                </el-table-column>

                                <el-table-column
                                        property="productName"
                                        label="产品名称">
                                </el-table-column>

                                <el-table-column
                                        property="productCode"
                                        label="产品编码">
                                </el-table-column>

                                <el-table-column
                                        property="productBrand"
                                        label="品牌">
                                </el-table-column>

                                <el-table-column
                                        property="productModels"
                                        label="规格型号">
                                </el-table-column>

                                <el-table-column
                                        property="priductUnit"
                                        label="单位">
                                </el-table-column>

                                <el-table-column
                                        property="nowCanUseStockCount"
                                        label="当前可用库存数量">
                                </el-table-column>

                                <el-table-column
                                        property="purchaseNum"
                                        label="采购数量">
                                </el-table-column>

                            </el-table>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="choosePurchaseOrderDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="handleConfirm">确 定</el-button>
                            </span>
                        </el-dialog>
                    </el-col>


                    <el-col :span="8" >
                        <el-form-item label="供应商编码"  style="width: 450px">
                            <el-input v-model="supplierCode" placeholder="请选择采购订单,自动获取" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="供应商名称"  style="width: 450px">
                            <el-input v-model="supplierName" placeholder="请选择采购订单,自动获取" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="供应商联系人姓名" prop="supplierContactinfoName" label-width="130px">
                            <div class="e7" @click="supplierContactinfoDialogVisible = true">
                                <span>{{ supplierDeliverGoods.shipperName || '+ 选择联系人' }}</span>
                            </div>
                        </el-form-item>

                        <el-dialog
                                title="联系人列表"
                                :visible.sync="supplierContactinfoDialogVisible"
                                width="30%">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div>
                                        <el-tree
                                                ref="treeComponent"
                                                :data="filtercompanyDepartmentList"
                                                node-key="id"
                                                :props="defaultProps"
                                                :default-expanded-keys="[1]"
                                                @node-click="handleNodeClick"
                                                :highlight-current="true"
                                                :current-node-key="selectedNodeId">
                                        </el-tree>
                                    </div>
                                </el-col>
                            </el-row>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="supplierContactinfoDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="handleConfirm">确 定</el-button>
                            </span>

                        </el-dialog>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="供应商联系人手机" prop="supplierContactinfoPhone" label-width="130px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.shipperPhone" placeholder="请选择联系人,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="采购订单编号"  style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.purchaseCode" placeholder="请选择采购订单,自动获取" style="width: 350px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="采购订单名称" prop="purchaseOrderName" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.purchaseOrderName" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="送货单编号" prop="deliverCode" label-width="120px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.deliverCode" placeholder="自动生成,无需填写" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="采购负责人"  style="width: 450px">
                            <el-input v-model="purchasePerson" placeholder="请选择采购订单,自动获取" style="width: 350px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="采购归属部门" prop="shipperName" style="width: 450px">
                    <el-input v-model="purchaseDepartment" placeholder="请选择采购订单,自动获取"></el-input>
                </el-form-item>

            </div>
            <!--采购信息到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <!--日期信息开始-->
            <span class="titleStr">日期信息</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e3">
                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="订单签订时间" prop="driverName" style="width: 450px">
                            <el-input v-model="purchaseOrderList.purchaseSignDate" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8" >
                        <el-form-item label="供应商送货时间" prop="driverPhone" label-width="120px" style="width: 450px">
                            <el-date-picker
                                    v-model="supplierDeliverGoods.deliverDate"
                                    type="datetime"
                                    placeholder="请选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8" >
                        <el-form-item label="供应商预计到货时间" prop="carNum" style="width: 450px" label-width="140px">
                            <el-date-picker
                                    v-model="supplierDeliverGoods.planArrivalDate"
                                    type="datetime"
                                    placeholder="请选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <!--日期信息到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <!--送货信息开始-->
            <span class="titleStr">送货信息</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e4">
                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="选择送货信息" prop="purchaseOrderId" >
                            <div class="e1" @click="chooseDeliverInfoDialogVisible = true">
                                <span id="person2" class="el-icon-coin"> 选择数据</span>
                            </div>
                        </el-form-item>

                        <el-dialog
                                title="选择数据"
                                :visible.sync="chooseDeliverInfoDialogVisible"
                                width="50%">

                            <el-table
                                    ref="singleTable"
                                    :data="filterSupplierlist"
                                    highlight-current-row
                                    border
                                    :row-key="getRowKey"
                                    @select="handleSelect"
                                    style="width: 100%">

                                <el-table-column
                                        type="selection"
                                        width="50">
                                </el-table-column>

                                <el-table-column
                                        property="supplierName"
                                        label="供应商名称"
                                        width="120">
                                </el-table-column>

                                <el-table-column
                                        property="shipperName"
                                        label="发货人姓名">
                                </el-table-column>

                                <el-table-column
                                        property="shipperPhone"
                                        label="发货人联系方式">
                                </el-table-column>

                                <el-table-column
                                        property="supplierAddress"
                                        label="发货地址">
                                </el-table-column>

                                <el-table-column
                                        property="driverName"
                                        label="司机姓名">
                                </el-table-column>

                                <el-table-column
                                        property="driverPhone"
                                        label="司机联系方式">
                                </el-table-column>

                                <el-table-column
                                        property="carNum"
                                        label="送货车牌号">
                                </el-table-column>
                            </el-table>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="chooseDeliverInfoDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="handleConfirm">确 定</el-button>
                            </span>
                        </el-dialog>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="发货人姓名" prop="shipperName" label-width="120px" style="width: 450px" >
                            <el-input v-model="supplierDeliverGoods.shipperName" placeholder="请选择送货信息,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="发货人联系方式" prop="shipperPhone" style="width: 450px" label-width="140px">
                            <el-input v-model="supplierDeliverGoods.shipperPhone" placeholder="请选择送货信息,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="司机姓名" prop="driverName" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.driverName" placeholder="请选择送货信息,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="司机联系方式" prop="driverPhone" label-width="130px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.driverPhone" placeholder="请选择送货信息,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="送货车牌号"  style="width: 450px">
                            <el-input v-model="carNum" placeholder="请选择送货信息,自动获取" style="width: 350px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="发货地址"  style="width: 450px">
                    <el-input v-model="supplierAddress" placeholder="请选择送货信息,自动获取" style="width: 350px"></el-input>
                </el-form-item>
            </div>
            <!--送货信息到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <!--收货信息开始-->
            <span class="titleStr">收货信息</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e5">
                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="收货仓库" prop="inWarehouse" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.inWarehouse" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="收货人姓名" prop="warehouseLeader" label-width="120px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.warehouseLeader" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="收货人联系方式" prop="warehousePhone" style="width: 450px" label-width="120px">
                            <el-input v-model="supplierDeliverGoods.warehousePhone" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="收货人地址" prop="adress" style="width: 450px">
                    <el-input v-model="supplierDeliverGoods.adress" placeholder="请选择采购订单,自动获取"></el-input>
                </el-form-item>
            </div>
            <!--收货信息到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <!--送货明细开始-->
            <span class="titleStr">送货明细</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e6">
                <el-table
                        ref="singleTable"
                        :data="filterSupplierlist"
                        highlight-current-row
                        border
                        style="width: 100%">

                    <el-table-column
                            property="productName"
                            label="产品名称"
                            width="120"
                    >
                    </el-table-column>

                    <el-table-column
                            property="productCode"
                            label="产品编码"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            property="productBrand"
                            label="品牌">
                    </el-table-column>

                    <el-table-column
                            property="productModels"
                            label="规格型号">
                    </el-table-column>

                    <el-table-column
                            property="priductUnit"
                            label="单位">
                    </el-table-column>

                    <el-table-column  label="送货数量">
                        <template slot-scope="scope">
                            <input v-model="scope.row.productName" style="width: 100%"/>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <!--送货明细到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <!--送货确认开始-->
            <span class="titleStr">送货确认</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e3">
                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="送达确认" prop="stop">
                            <el-radio-group v-model="supplierDeliverGoods.stop">
                                <el-radio label="确认" ></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="送达时间" prop="arrivalDate" label-width="120px" style="width: 450px">
                            <el-date-picker
                                    v-model="supplierDeliverGoods.arrivalDate"
                                    type="datetime"
                                    placeholder="请选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="拍照" prop="pic" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.pic" placeholder="请选择采购订单,自动获取"></el-input>
                        </el-form-item>
<!--                        <el-form-item label="拍照" prop="pic">-->
<!--                            <el-upload-->
<!--                                    class="upload-demo"-->
<!--                                    :action="$basePath+'manage/imgs/uploadPic?pid=' + supplierSign.supplierId"-->
<!--                                    multiple-->
<!--                                    :before-upload="beforeUpload"-->
<!--                                    :on-success="handleSuccess"-->
<!--                                    :before-remove="beforeRemove"-->
<!--                                    accept=".jpg,.jpeg,.png,.webp,.gif"-->
<!--                                    :headers="headers"-->
<!--                                    list-type="picture">-->
<!--                                <div class="e3">-->
<!--                                    <span id="person3">+ 选择 </span>-->
<!--                                </div>-->
<!--                                <div slot="tip" class="el-upload__tip">只能上传.jpg/.jpeg/.png/.webp/.gif文件，且不超过2MB，若不符合要求将无法上传</div>-->
<!--                            </el-upload>-->

<!--                        </el-form-item>-->
                    </el-col>
                </el-row>
            </div>
            <!--送货确认到此-->
            <!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "SupplierDeliverGoodsView",
        data(){
            return{
                //表单提交数据
                supplierDeliverGoods: {
                    purchaseOrderId:'',//采购订单id
                    deliverPersonId:'',//送货联系人id
                    deliverCode:'',//送货单编号
                    deliverDate:'',//供应商送货时间
                    planArrivalDate:'',//预计到货时间
                    arrivalDate:'',//实际送达时间
                    arrivalImgsId:'',//关联图片id
                    sure:''//送货确认
                },//表单提交数据到此
                //补充
                supplierName: '', // 初始化供应商名称
                filtercompanyDepartmentList: [], // 初始化过滤后的公司部门列表
                defaultProps: { // 初始化默认属性
                    label: 'name',
                    children: 'children'
                },
                selectedNodeId: null, // 初始化选中节点的ID
                purchasePerson: '', // 初始化采购人
                purchaseDepartment: '', // 初始化采购部门
                filterSupplierlist: [], // 初始化过滤后的供应商列表
                carNum: '', // 初始化车牌号
                supplierAddress: '', // 初始化供应商地址
                supplierCode: '' ,// 初始化供应商代码
                //补充结束
                //后端传递采购订单相关数组
                purchaseOrderList:[],
                //通过供应商id查找供应商信息
                SupplierDates:[],
                //el-dialog组件相关
                choosePurchaseOrderDialogVisible:false,//选择采购订单dialog
                chooseDeliverInfoDialogVisible:false,//选择送货信息dialog
                supplierContactinfoDialogVisible:false,//选择供应商联系人dialog
                //附件上传文件相关
                imageUrl:[],
                headers:{token:window.localStorage.getItem("token")},
                //规则
                rules: {

                }//规则到此

            }//return到此
        },
        //钩子函数
        created() {
            this.getPurchaseOrderList()
        },
        //方法
        methods: {
            //获得所有采购订单
            getPurchaseOrderList() {
                this.$axios.get("manage/purchaseOrder/list").then(
                    response => {
                        this.purchaseOrderList = response.data.purchaseOrderList;
                        // 遍历采购订单列表，获取每个订单的 supplierId 并调用 getSupplierData 方法,以此来获取每个采购订单对应的供应商信息
                        this.purchaseOrderList.forEach(order => {
                            this.getSupplierData(order.supplierId);
                        });
                    }
                );
            },
            getSupplierData(id) {
                this.$axios.get("manage/supplier/" + id).then(
                        response => {
                            // 假设响应数据中的 supplierName 和 supplierCode 是我们需要的
                            let supplierName = response.data.supplierName;
                            let supplierCode = response.data.supplierCode;
                            // 找到当前订单并更新其 supplierName 和 supplierCode 属性
                            let targetOrder = this.purchaseOrderList.find(order => order.supplierId === id);
                            if (targetOrder) {
                                targetOrder.supplierName = supplierName;
                                targetOrder.supplierCode = supplierCode;
                            }
                        }
                    ).catch(error => {
                        console.error("获取供应商数据失败：", error);
                    });
            },
            //el-dialog节点点击的事件
            handleNodeClick() {
                // 在这里编写处理节点点击事件的逻辑
                console.log('节点被点击了');
                // 可以添加更多业务逻辑，比如更新数据、调用接口等
            },
            //el-dialog组件,点击确定按钮的处理函数
            handleConfirm() {
                // 将选中的数据赋值给相应的地方
                // this.supplierCode = this.selectedRows.supplierCode;
                // this.supplierName = this.selectedRows.supplierName;
                // this.supplierAddress = this.selectedRows.supplierAddress;
                // this.supplierDeliverGoods.supplierId=this.selectedRows.supplierId;
                this.dialogVisible = false;//关闭对话框
            },
            //表格相关
            getRowKey(row) {
                return row.supplierId; // 定义行的唯一标识，根据实际数据结构修改
            },
            // 表格选择改变事件，确保单选
            handleSelect(selection, row) {
                if (selection.length > 1) {
                    // 先取消之前的选择
                    if (this.selectedRows && this.selectedRows!== row) {
                        this.$refs.singleTable.toggleRowSelection(this.selectedRows, false);
                    }
                    this.selectedRows = row;
                    this.$refs.singleTable.toggleRowSelection(row, true);
                } else if (selection.length === 1) {
                    this.selectedRows = row;
                } else {
                    this.selectedRows = null;
                }
            },
            //附件上传相关事件
            //禁用掉删除功能
            beforeRemove(file, fileList) {
                // 这里返回 false 可以阻止文件的删除操作
                return false;
            },
            //图片上传之前的验证，返回true就会执行上传，返回false不执行上传
            beforeUpload(file) {
                const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
                const isAllowedType = allowedTypes.includes(file.type);
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isAllowedType) {
                    this.$message.error('上传的图片只能是.jpg,.jpeg,.png,.webp 或.gif 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isAllowedType && isLt2M;
            },
            //文件上传成功所调用的方法
            handleSuccess(res, file) {
                if (res.code == 10005) {
                    this.$message.error('上传图片大小超过!');
                    return;
                }
                this.imageUrl.push({
                    url: this.$basePath + "static/uploadImage/" + res.fileName,
                    imges: res.fileName,
                    type: '合同附件',
                    enable: true,
                    remark: ''
                });
                console.log("文件上传后显示的数据-----------------------------")
                console.log(this.imageUrl);
            },
            //附件上传相关事件到此
            //提交
            submitForm(formName) {
                alert("提交成功");
            },//提交到此
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
                alert("重置成功");
                // 手动清空数据

            }//重置到此
        }//方法到此
    }
</script>

<style scoped>
    .titleStr {
        line-height: 30px;
        color: #409EFF;
    }
    .describe {
        font-size: 14px;
        color: #666;
    }
    .e1 {
        padding: 0;
        border: 1px dashed #666;
        width: 350px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        font-weight:lighter;
    }
    .e2{
        height: 250px;
        z-index: 100;
    }
    .e3{
        height: 80px;
    }
    .e4{
        height: 200px;
    }
    .e5{
        height: 150px;
    }
    .e6{
        height: 200px;
    }
    .e7{
        padding: 0;
        border: 1px dashed #666;
        width: 320px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        font-weight:lighter;
    }
</style>